<template>
  <el-dialog title="新增计算配置" :modelValue="visible" width="520px" @close="$emit('closed')">
    <el-tabs v-model="activeName" type="card" class="demo-tabs">
      <el-tab-pane label="小牵张" name="first">
        <SmallQianYinTabPane :zoneId="zoneId" @closed="$emit('closed')" />
      </el-tab-pane>
      <el-tab-pane label="大牵张" name="second">
        <BigQianYinTabPane :zoneId="zoneId" @closed="$emit('closed')" />
      </el-tab-pane>
    </el-tabs>
  </el-dialog>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import BigQianYinTabPane from '../tab/BigQianYinTabPane.vue'
import SmallQianYinTabPane from '../tab/SmallQianYinTabPane.vue'

const activeName = ref('first')

const { visible, zoneId } = defineProps({
  visible: { type: Boolean, default: false },
  zoneId: { type: Number, default: 1 },
})
const emit = defineEmits(['closed'])
</script>

<style scoped lang="scss"></style>
